<template>
  <div class="home">
    <div class="body">
      <!-- 步骤1 -->
      <div class="title" v-if="step == 1">业务单据-{{titleName}}单</div>
      <div class="title" v-else>单据信息</div>
      <div class="search">
        <div class="block">
          <span>厂家：</span>
          <el-select
            v-model="spell"
            filterable
            remote
            reserve-keyword
            placeholder="请输入关键词"
            :remote-method="remoteMethod"
            :loading="loading"
            style="width:240px"
          >
            <el-option label="全部" value></el-option>
            <el-option
              v-for="item in options"
              :key="item.FlnkID"
              :label="item.CustomerName"
              :value="item.FlnkID"
            ></el-option>
          </el-select>
        </div>
        <div class="block">
          <span>日期：</span>
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width:240px"
          ></el-date-picker>
        </div>
        <div class="block">
          <el-button type="primary" style="width:200px;height:40px" @click="search()">查询</el-button>
        </div>
      </div>
      <div class="tabs" v-if="step == 1">
        <div class="table-w">
          <div class="tit">入库明细</div>
          <el-table
            :data="billList"
            :row-style="tableRowStyle"
            :header-cell-style="tableHeaderColor"
            highlight-current-row
            style="width: 100%;font-size:16px;"
            height="8rem"
          >
            <!-- <el-table-column type="selection" width="80"></el-table-column> -->
            <el-table-column label="序号" width="160" align="center">
              <template slot-scope="scope">{{scope.$index + 1}}</template>
            </el-table-column>
            <el-table-column prop="CustomerName" label="厂家" align="center"></el-table-column>
            <el-table-column prop="RegisterTime" label="入库时间" width="200" align="center"></el-table-column>
            <el-table-column prop="RegisterID" label="运单号" width="200" align="center"></el-table-column>
            <el-table-column prop="CardID" label="车牌号" width="200" align="center"></el-table-column>
            <el-table-column prop="Deliveryman" label="送货人" width="200" align="center"></el-table-column>
            <el-table-column prop="IsEnable" label="状态" width="200" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.IsEnable == 1">正常</span>
                <span style="color:#f00" v-if="scope.row.IsEnable == 0">作废</span>
              </template>
            </el-table-column>
            <el-table-column prop="operate" label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  type="primary"
                  style="width:120px;height:40px"
                  @click="handleView(scope.row)"
                >查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-pagination
          background
          layout="prev, pager, next"
          :total="count"
          :current-page.sync="currentPage"
          @current-change="changePage()"
        ></el-pagination>
      </div>
      <!-- 步骤2 -->
      <div class="tabs" v-if="step == 2">
        <div class="table-w">
          <div class="tit">收货明细</div>
          <el-table
            :data="detailList"
            :row-style="tableRowStyle"
            :header-cell-style="tableHeaderColor"
            highlight-current-row
            style="width: 100%;font-size:16px;"
            height="8rem"
          >
            <!-- <el-table-column type="selection" width="80"></el-table-column> -->
            <el-table-column label="序号" width="80" align="center">
              <template slot-scope="scope">{{scope.$index + 1}}</template>
            </el-table-column>
            <el-table-column prop="CustomerID" label="客户料号" width="160" align="center"></el-table-column>
            <el-table-column prop="MaterielsDetailCode" label="本场料号" align="center"></el-table-column>
            <el-table-column prop="MaterielName" label="物料名称" width="160" align="center"></el-table-column>
            <el-table-column prop="ColorConfigName" label="规格" width="160" align="center"></el-table-column>
            <el-table-column prop="SpecConfigName" label="型号" width="160" align="center"></el-table-column>
            <el-table-column prop="UnitWeight" label="克重" width="160" align="center"></el-table-column>
            <el-table-column prop="TotalWeight" label="重量" width="160" align="center"></el-table-column>
            <el-table-column prop="PieCount" label="匹数" width="160" align="center"></el-table-column>
            <el-table-column prop="RelaWarehouseName" label="目标仓" width="160" align="center"></el-table-column>
          </el-table>
          <el-pagination
            background
            layout="prev, pager, next"
            :total="countDetail"
            :current-page.sync="currentPageDetail"
            @current-change="changePageDetail()"
          ></el-pagination>
          <div class="buts">
            <el-button type="primary" style="width:200px;height:40px" @click="step = 1">返回单据列表</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Mixin from '@/components/mixin'
import {getCustomerList} from '@/api/common'
import {getDetailList, getOutInStockRegisterByFilter} from '@/api/search'
export default {
  name: 'search',
  data () {
    return {
      step: 1,
      titleList: ['出库', '入库'],
      billList: [],
      customerList: [],
      options: [],
      loading: false,
      spell: '',
      titleName: '',
      conpanyName: '',
      styleName: '',
      orderNum: '',
      dateRange: [
        this.$moment().subtract(1, 'month').format('YYYY-MM-DD'),
        this.$moment().format('YYYY-MM-DD')
      ],
      count: 0,
      currentPage: 1,
      detailList: [],
      countDetail: 0,
      currentPageDetail: 1,
      setRow: {}
    }
  },
  computed: {},
  components: {},
  mixins: [Mixin], // demo.vue 中声明minix 进行混合
  methods: {
    // 修改table tr行的背景色
    tableRowStyle ({ row, rowIndex }) {
      return {
        backgroundColor: 'rgb(0, 63, 140)',
        color: '#fff',
        fontWeight: 'bold',
        height: '0.7rem',
        fontSize: '15px'
      }
    },
    // 修改table header的背景色
    tableHeaderColor ({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background-color: rgb(0, 63, 140);color: #fff;font-weight: bold;height:0.7rem;font-size:15px'
      }
    },
    // 入库单据
    getList () {
      let vm = this
      let params = new FormData()
      params.append(
        'CustomerFlnkID',
        vm.spell ? vm.spell : '00000000-0000-0000-0000-000000000000'
      )
      params.append('RegisterType', vm.$route.query.type)
      params.append(
        'StartDate',
        vm.$moment(vm.dateRange[0]).format('YYYY-MM-DD')
      )
      params.append(
        'EndDate',
        vm.$moment(vm.dateRange[1]).format('YYYY-MM-DD')
      )
      params.append('PageIndex', vm.currentPage - 1)
      params.append('PageSize', 10)
      getOutInStockRegisterByFilter(params).then((response) => {
        if (response.data.data) {
          vm.billList = response.data.data
          vm.count = response.data.count
        }
      })
    },
    changePage () {
      let vm = this
      vm.getList()
    },
    changePageDetail () {
      let vm = this
      vm.getDetailList()
    },
    remoteMethod (query) {
      if (query !== '') {
        this.loading = true
        setTimeout(() => {
          this.loading = false
          this.options = this.customerList.filter((item) => {
            return (
              item.SimpleSpell.toLowerCase().indexOf(query.toLowerCase()) > -1
            )
          })
        }, 200)
      } else {
        this.options = this.customerList
      }
    },
    getCustomerList () {
      let vm = this
      let params = new FormData()
      params.append('Spell', vm.spell)
      params.append('BusinessScope', '')
      getCustomerList(params).then((response) => {
        if (response.data.result) {
          vm.customerList = response.data.data
          vm.options = response.data.data
        }
      })
    },
    handleView (row) {
      let vm = this
      vm.step = 2
      vm.setRow = row
      vm.getDetailList()
    },
    // 单据：出入库单据明细列表
    getDetailList (row) {
      let vm = this
      let params = new FormData()
      params.append('RegisterFlnkID', vm.setRow.FlnkID)
      params.append('PageIndex', vm.currentPageDetail - 1)
      params.append('PageSize', 10)
      getDetailList(params).then((response) => {
        if (response.data.result) {
          vm.detailList = response.data.data
          vm.countDetail = response.data.count
        }
      })
    },
    search () {
      let vm = this
      vm.getList()
    }
  },
  watch: {},
  mounted () {
    let vm = this
    vm.titleName = vm.titleList[vm.$route.query.type]
    vm.getList()
    vm.getCustomerList()
  },
  beforeDestroy: function () {}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import "~@/css/search/bill.scss";
</style>
<style lang="scss">
.el-date-editor .el-range-separator{
    color: #fff;
    line-height: 0.55rem;
}
</style>